<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订单管理</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="container-fluid">

    <div class="app-title">
        <div>
            <h1><i class="fa fa-circle-o"></i> 订单管理</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><a href="welcome.html">首页</a></li>
            <li class="breadcrumb-item active">订单管理</li>
        </ul>
    </div>

    <div class="tile">

        <p class="form-inline">
            <input type="text" class="form-control mr-1" placeholder="订单号">
            <button type="button" class="btn btn-outline-primary mr-1">
                <i class="fa fa-search"></i>搜索
            </button>
            <a href="order_meal.html" class="btn btn-outline-success mr-1">
                <i class="fa fa-plus-square"></i>下单
            </a>
        </p>
        <h4 v-text="title">已支付订单</h4>
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                <tr class="bg-light">
                    <th>序号</th>
                    <th>下单用户</th>
                    <th>订单号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>下单时间</th>
                    <th>操作</th>
                    <th width="100"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="order in orders">
                    <td v-text="order.id"></td>
                    <td v-text="order.userNickname"></td>
                    <td v-text="order.itemId">P001</td>
                    <td v-text="order.goodsName"><a href=""></a></td>
                    <td v-text="order.goodsPrice"></td>
                    <td v-text="order.created"></td>
                    <td>
                        <button type="button" class="btn btn-outline-primary mr-1" :name="btnName" @click="operation(btn,btnName,order.id)">{{btn}}</button></td>
                    <td>
                        <a class="text-info" href="order_detail.html" title="查看"><i class="fa fa-lg fa-search-plus"></i></a>
                        <a class="text-danger" href="javascript:doRemove(0)" title="删除"><i class="fa fa-lg fa-trash"></i></a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>


        <!--分页-->
        <ul class="pagination">
            <li class="page-item disabled"><a class="page-link">«</a></li>
            <li class="page-item active"><a class="page-link">1</a></li>
            <li class="page-item"><a class="page-link">»</a></li>
        </ul>

    </div>
    <!-- /.tile -->
</div>
<!-- /.container-fluid -->

<!-- Essential javascripts for application to work-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!-- Page specific javascripts-->
<script src="lib/layer/layer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    function doRemove(id) {
        layer.confirm("删除操作无法恢复，您确定要删除吗?", function () {
            layer.msg("已删除~");
        });
    }
</script>
<script>
    var order_vm = new Vue({
        el:".tile",
        data:{
            orders:[{}]
            ,title:''
            ,btn:''
            ,btnName:''
        },
        created:function () {
            let condition = location.href.split("?")[1].split("=")[0];
            axios.get("/v1/order/getOrder/"+condition).then(function (response) {
                order_vm.orders = response.data;
            })
            console.log(condition)
            switch (condition) {
                case "ispay":
                    this.title = "已支付订单";
                    this.btn = "确认";
                    this.btnName = "confirm";
                    break;
                case "isconfirm":
                    this.title = "已确认订单";
                    this.btn = "发货";
                    this.btnName = "send";
                    break;
                case "issend":
                    this.title = "已发货订单";
                    this.btn = "收货";
                    this.btnName = "receive";
                    break;
                case "isreceive":
                    this.title = "已签收订单";
                    this.btn = "完成";
                    this.btnName = "finish";
                    break;
                case "isfinish":
                    this.title = "已完成订单";
                    this.btn = "删除";
                    this.btnName = "delete";
                    break;
            }
        },
        methods:{
            operation:function (btn,btnName,id) {
                if(!confirm("您确定要"+btn+"吗?")){
                    return;
                }
                axios.get("/v1/order/operation/"+btnName+"?id="+id).then(function () {
                    alert("完成"+btn+"操作");
                    location.reload();
                })
            }
        }
    })
</script>
</body>
</html>